<template>
  <div class="sortCon">
    <div class="erSort">
      <div
        class="item acea-row row-middle title1"
        v-for="(item, index) in list"
        :key="index"
      >
        <!-- line1 -->
        <div class="name">{{ item.translateName }}</div>
        <div class="cateList">
          <span
            class="cateItem"
            @click="goCate(items)"
            v-for="(items, indexn) in item.childList"
            :key="indexn"
          >
            {{ items.translateName }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 商品分类
    goCate(items) {
      this.$emit("goCate", items);
    },
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.sortCon {
  flex: 1;
  height: 100%;
  overflow: scroll;
  background-color: #fff;
  .title {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f1f1;
    .font-color {
      padding-bottom: 8px;
      font-size: 16px;
      border-bottom: 2px solid $user--color-primary;
    }
  }
  .erSort {
    column-fill: balance;
    column-count: 3;
    column-gap: 30px;
    // display: flex;
    // flex-wrap: wrap;
    // align-items: flex-start;
    // flex-direction: row;
    .item {
      break-inside: avoid;
      // width: 33%;
      .name {
        font-weight: 700;
        width: 100%;
        font-size: 18px;
        color: #000;
      }
      .item-child {
        margin: 12px 30px 10px 0;
        font-size: 14px;
        color: $use-color-info-light-2;
        width: 100%;
      }
      .pictrue {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title1 {
      display: flex;
      // flex-direction: column;
      width: 270px;
      margin-bottom: 15px;
      font-size: 18px;
      color: #000;
    }
    .cateList {
      margin: 10px 10px 0 0;
      font-size: 14px;
      color: $use-color-info-light-2;

      .cateItem {
        text-align: left;
        // margin-right: 20px;
        font-weight: 500;
        margin-bottom: 10px;
        display: block;
        cursor: pointer;
        font-size: 14px;
        color: #30303c;
        &:hover {
          color: $user--color-primary;
        }
      }
    }
  }
}
.line1 {
}
</style>
